<template>
  <div>
    <el-date-picker clearable v-model="dateValue[0]" :type="pickerType" :placeholder="placeholder[0]"
      :value-format="valueFormat" @change="emitParent(0)" :style="pickStyle" :picker-options="pickerOptions">
    </el-date-picker>
    <div class="own-text__date">至</div>
    <el-date-picker clearable v-model="dateValue[1]" :type="pickerType" :placeholder="placeholder[1]"
      :value-format="valueFormat" @change="emitParent(1)" :style="pickStyle" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  export default {
    name: 'date-range',
    // props: ['value'],
    props: {
      value: {
        Type: Array,
        default: () => ['', '']
      },
      pickerType: {
        Type: String,
        default: 'date'
      },
      placeholder: {
        Type: Array,
        default: () => ['开始日期', '结束日期']
      },
      valueFormat: {
        Type: String,
        default: 'yyyy-MM-dd'
      },
      errMsg: {
        Type: String,
        default: '开始日期不得大于结束日期'
      },
      minStartDate: {
        Type: String,
        default: ''
      },
      minStartDateMsg: {
        Type: String,
        default: ''
      },
      minEndDate: {
        Type: String,
        default: ''
      },
      minEndDateMsg: {
        Type: String,
        default: ''
      },
      minDate: {
        Type: String,
        default: ''
      },
      minDateMsg: {
        Type: String,
        default: ''
      },
      maxDate: {
        Type: String,
        default: ''
      },
      maxDateMsg: {
        Type: String,
        default: ''
      },
      pickStyle: {
        Type: String,
        default: ''
      },
      pickerOptions: {
        Type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        dateValue: this.value || ['', ''],
      }
    },
    watch: {
      value(val) {
        this.dateValue = Array.isArray(val) ? val : ['', '']
      }
    },
    methods: {
      emitParent(type) {
        if (type == 0 && this.$props.minStartDate && (this.dateValue[0] && this.dateValue[0] <= this.$props
            .minStartDate)) {
          Message.error(this.$props.minStartDateMsg)
          this.dateValue[0] = ''
          this.$forceUpdate()
        } else if (type == 1 && this.$props.minEndDate && (this.dateValue[1] && this.dateValue[1] <= this.$props
            .minEndDate)) {
          Message.error(this.$props.minEndDateMsg)
          this.dateValue[1] = ''
          this.$forceUpdate()
        } else if (this.$props.minDate && ((this.dateValue[0] && this.dateValue[0] <= this.$props.minDate) || (this
            .dateValue[
              1] && this.dateValue[1] <= this.$props.minDate))) {
          Message.error(this.$props.minDateMsg)
          this.dateValue[parseInt(type)] = ''
          this.$forceUpdate()
        } else if (this.$props.maxDate && ((this.dateValue[0] && this.dateValue[0] >= this.$props.maxDate) || (this
            .dateValue[
              1] && this.dateValue[1] >= this.$props.maxDate))) {
          Message.error(this.$props.maxDateMsg)
          this.dateValue[parseInt(type)] = ''
          this.$forceUpdate()
        } else {
          if (this.dateValue[0] && this.dateValue[1] && this.dateValue[0] > this.dateValue[1]) {
            Message.error(this.$props.errMsg)
            this.dateValue[parseInt(type)] = ''
            this.$forceUpdate()
          }
        }
        this.$emit('input', this.dateValue);
      }
    }

  }
</script>

<style lang="scss">
  .own-text__date {
    display: inline-block;
    text-align: center;
    width: 102px;
  }
</style>
